<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import PhoneForm from '@/components/form/PhoneForm.vue'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
import { queryOtherCharge } from '@/api/expense'
import { queryOtherChargeTableCol, queryOtherChargeRequestData } from '@/api/expense/types/expense'
import OtherChargedRefundTable from '@/components/table/OtherChargedRefundTable.vue'
import { defineAsyncComponent } from 'vue'

defineOptions({
  name: 'IllegalRepairs'
})
const form = reactive<queryOtherChargeRequestData>({
  phone: '',
  orderId: '',
  operationType: ''
})
const { pagination, handleSizeChange, handleCurrentChange, data, loading, setCurrentPage, load } =
  useTable<queryOtherChargeTableCol>(queryOtherCharge, getToken() ?? '', () => form)
const handleFormSearch = () => {
  setCurrentPage(1)

  load()
}
onMounted(() => {
  load()
})
/** 新建其他收费 */
const OtherFeeChargedDialog = defineAsyncComponent(
  () => import('@/components/dialog/OtherFeeCharged.vue')
)
const OtherFeeChargedDialogRef = ref<InstanceType<typeof OtherFeeChargedDialog> | null>(null)
const AddCharged = () => {
  OtherFeeChargedDialogRef.value?.open()
}
/** 其他收费待付调整 */
const AdjustBikeFee2Dialog = defineAsyncComponent(
  () => import('@/components/dialog/AdjustBikeFee2.vue')
)
const AdjustBikeFee2DialogRef = ref<InstanceType<typeof AdjustBikeFee2Dialog> | null>(null)

const hadnleOpenAdjust = (row: queryOtherChargeTableCol) => {
  AdjustBikeFee2DialogRef.value?.setData(row)
  AdjustBikeFee2DialogRef.value?.open()
}
/** 其他收费 退费 */
const OtherFeeRefundDialog = defineAsyncComponent(
  () => import('@/components/dialog/OtherFeeRefund.vue')
)
const OtherFeeRefundDialogRef = ref<InstanceType<typeof OtherFeeRefundDialog> | null>(null)

const handleOpenRefund = (row: queryOtherChargeTableCol) => {
  OtherFeeRefundDialogRef.value?.setData(row)
  OtherFeeRefundDialogRef.value?.open()
}
</script>

<template>
  <div class="xy-container">
    <div mb-20>
      <el-button type="primary" @click="AddCharged">新增收费</el-button>
    </div>
    <phone-form v-model="form" @search="handleFormSearch">
      <template #other>
        <el-form-item prop="orderId" label="关联订单/行程编号">
          <el-input v-model="form.orderId" placeholder="请输入关联订单/行程编号" />
        </el-form-item>
      </template>
      <template #select>
        <el-form-item prop="operationType" label="调整类型">
          <el-select v-model="form.operationType" style="width: 120px">
            <el-option label="不限" value="" />
            <el-option label="违规费" value="4" />
            <el-option label="维修费" value="2" />
            <el-option label="拖车费" value="3" />
          </el-select>
        </el-form-item>
      </template>
    </phone-form>
    <other-charged-refund-table
      :data="data"
      :loading="loading"
      @open-adjust="hadnleOpenAdjust"
      @open-refund="handleOpenRefund"
    />
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
    <other-fee-charged-dialog ref="OtherFeeChargedDialogRef" @refresh="load" />
    <adjust-bike-fee2-dialog ref="AdjustBikeFee2DialogRef" @refresh="load" />
    <other-fee-refund-dialog ref="OtherFeeRefundDialogRef" @refresh="load" />
  </div>
</template>

<style scoped></style>
